import { View, Image, Text } from "@tarojs/components";
import React, { useEffect, useState } from "react";
import { commentType } from "@/types";
import { TimeFormart } from "@/utils/format";
import http from "@/request";
import { HideLoading, ShowLoading, ShowToast, VibrateShort } from "@/utils";
import user from "@/store/user";
import Taro from "@tarojs/taro";

import "./index.scss"

const Comments: React.FC<{
    comment: commentType,
    onResponse: (data: commentType) => void
    onDelete: (data: commentType) => void
}> = ({ comment, onResponse, onDelete }) => {

    const [childrenComment, setChildrenComment] = useState<commentType[]>([])
    const [isLiked, setIsLiked] = useState<number>()

    // TODO 加载更多的逻辑还没做 删除也没做
    const queryChild = () => {
        if (!comment.id) return
        http.post('/article-comment/childPage', {
            page: 1,
            size: 99,
            id: comment.id
        }).then(res => {
            setChildrenComment(res.data.records || [])
        })
    }

    const doLike = (comment: commentType) => {
        // likeType 0未点1点赞2点踩
        const val = comment.isLiked === 1 ? 0 : 1
        http.put(`/article-comment/dolike/${comment.id}?likeType=${val}`).then(_ => {
            ShowToast('操作成功')
            if (comment.parentId) {
                queryChild()
            } else {
                setIsLiked(val)
                comment.isLiked = val
                comment.likeNum = (comment.likeNum || 0) + (val ? 1 : -1)
            }
        }).catch(err => {
            ShowToast(err.msg || '操作失败')
        })
    }

    const deleteComment = (comment: commentType, isChild: boolean) => {
        VibrateShort()
        Taro.showModal({
            title: '是否删除所选评论？',
            content: '',
            success: (res: any) => {
                if (res.confirm) {
                    VibrateShort()
                    ShowLoading()
                    http.delete(`/article-comment/delete/${comment.id}`).then(() => {
                        if (isChild) {
                            queryChild()
                        } else {
                            onDelete(comment)
                        }
                        HideLoading()
                    }).catch(err => {
                        ShowToast(err.msg || '删除失败')
                    })
                }
            }
        })
    }

    useEffect(() => {
        queryChild()
        setIsLiked(comment.isLiked)
    }, [comment])

    return (
        <View className="comments-container">
            <View className="comment-item flex-row font-size28">
                <Image className="avatar" src={comment.userAvatar || ''}></Image>
                <View className="comment-content">
                    <View className="flex-row flex-item">
                        <View className="user-name flex1">{comment.userName || ''}</View>
                        {
                            isLiked === 1 ?
                                <Text onClick={() => doLike(comment)} className="like-btn iconfont icon-dianzan-full"></Text> :
                                <Text onClick={() => doLike(comment)} className="like-btn iconfont icon-dianzan"></Text>
                        }
                        <Text className="likes-nun">{comment.likeNum || 0}</Text>
                    </View>
                    <View className={`comment-text ${comment.isDeleted ? 'is-deleted' : ''}`}>
                        {comment.content}
                    </View>
                    <View className="comment-info font-size24 flex-row flex-item">
                        <View className="time-info">{TimeFormart(comment.editTime)}</View>
                        {
                            !comment.isDeleted ?
                            <View onClick={() => onResponse(comment)} className="feedback-btn">回复</View> : null
                        }
                        {
                            !comment.isDeleted && (comment.userId === user.info?.id) ?
                                <View onClick={() => deleteComment(comment, false)} className="feedback-btn">
                                    删除
                                </View> : null
                        }
                    </View>
                    {
                        childrenComment.map(item => {
                            return (
                                <View className="comment-child flex-row" key={item.id}>
                                    <Image className="child-avatar" src={item.userAvatar || ''}></Image>
                                    <View className="comment-content">
                                        <View className="flex-row flex-item">
                                            <View className="user-name flex1">{item.userName}</View>
                                            {
                                                item.isLiked ?
                                                    <Text onClick={() => doLike(item)} className="like-btn iconfont icon-dianzan-full"></Text> :
                                                    <Text onClick={() => doLike(item)} className="like-btn iconfont icon-dianzan"></Text>
                                            }
                                            <Text className="likes-nun">{item.likeNum || 0}</Text>
                                        </View>
                                        <View className={`comment-text ${item.isDeleted ? 'is-deleted' : ''}`}>
                                            {
                                                item.toUserName ? <>回复<Text className="user-name feed-back-user">{item.toUserName}：</Text></> : ''
                                            }
                                            {item.content}
                                        </View>
                                        <View className="comment-info flex-row flex-item">
                                            <View className="time-info">{TimeFormart(item.editTime)}</View>
                                            {!item.isDeleted ?
                                                <View onClick={() => onResponse({
                                                    ...item,
                                                    id: comment.id
                                                })} className="feedback-btn">
                                                    回复
                                                </View> : null
                                            }
                                            {
                                                !item.isDeleted && (item.userId === user.info?.id) ?
                                                    <View onClick={() => deleteComment(item, true)} className="feedback-btn">
                                                        删除
                                                    </View> : null
                                            }
                                        </View>
                                    </View>
                                </View>
                            )
                        })
                    }
                </View>
            </View>
        </View>
    )
}

export default Comments